<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>公告列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/mainstyle.css">
    <script src="/js/bootstrap.bundle.min.js"></script>
</head>
<style>
    .pagination .page-item .page-link {
        border: none; /* 移除边框 */
        background-color: transparent; /* 背景透明 */
        color: #0accce; /* 设置文字颜色 */
        padding: 5px 10px; /* 调整内边距 */
        font-size: 14px;
    }
    .list-group-item:hover {
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
    }
    .page-item:hover{
        cursor: pointer;
    }
</style>
<body>
<div th:if="${session.Doctor}" th:insert="~{doctor/header}"></div>
<div th:if="${session.User}" th:insert="~{user/header}"></div>
<main id="main">
    <!--副标题-->
    <section class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h2>公告</h2>
                <ol>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">公告</a></li>
                </ol>
            </div>
        </div>
    </section>
    <section class="inner-page">
        <div class="container">
            <div class="card">
                <div class="card-body">
                    <div class="row d-flex">
                        <div class="col-7" style="margin-top:20px;">
                            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
                                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="img/轮播1.JPG" class="d-block w-100">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="img/轮播2.JPG" class="d-block w-100" >
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-5">
                            <form th:action="@{/lastedBoardList}" method="get" class="formstlye text-right">
                                <input type="text" name="keyword" placeholder="请输入搜索关键字" th:value="${keyword}" />
                                <button type="submit" style="border-radius: 8px;font-size: 13px;">搜索</button>
                            </form>
                            <ul class="list-group list-group-flush ">
                                <li class="list-group-item" th:each="board : ${announcements}" th:attr="data-href=@{/aBoardDetail(id=${board.id})}">
                                    <div class="media">
                                        <div class="media-body">
                                            <div class="d-flex align-items-center">
                                                <p class="media-heading" th:text="${board.title}" style="font-size: 18px"></p>
                                            </div>
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <div style="display: flex;">
                                                    <p th:text="${#temporals.format(board.fbrq, 'yyyy-MM-dd')}" style="margin-right: 10px;font-size: 14px"></p>
                                                    <p>
                                                        <i class="bi bi-eye-fill" style="font-size: 12px;"></i>
                                                        <span th:text="${board.seecount}" style="font-size: 12px;"></span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="text-center">
                            <ul class="pagination justify-content-center" style="flex-wrap: nowrap;">
                                <!-- 上一页的点状指示器 -->
                                <li class="page-item" th:if="${currentPage} != 1">
                                    <a class="page-link" href="#" th:href="@{/lastedBoardList(currentPage=${currentPage - 1})}" aria-label="Previous">
                                        <span aria-hidden="true">&lsaquo;</span>
                                    </a>
                                </li>
                                <!-- 中间的点状指示器 -->
                                <li class="page-item" th:each="page : ${#numbers.sequence(1, totalPage)}" th:classappend="${currentPage} == page">
                                    <a class="page-link" href="#" th:href="@{/lastedBoardList(currentPage=${page})}" th:text="${page}"></a>
                                </li>
                                <!-- 下一页的点状指示器 -->
                                <li class="page-item" th:if="${currentPage} !=${totalPage}">
                                    <a class="page-link" href="#" th:href="@{/lastedBoardList(currentPage=${currentPage + 1})}" aria-label="Next">
                                        <span aria-hidden="true">&rsaquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<script>
    // 当文档加载完毕后，为每个公告项添加点击事件监听器
    document.addEventListener('DOMContentLoaded', function() {
        var announcementItems = document.querySelectorAll('.list-group-item');
        announcementItems.forEach(function(item) {
            item.addEventListener('click', function() {
                // 获取data-href属性，它包含了详情页面的URL
                var href = this.getAttribute('data-href');
                if (href) {
                    window.location.href = href;
                }
            });
        });
    });
</script>
</body>
</html>